<!DOCTYPE html>
<!-- release v5.1.4, copyright 2014 - 2020 Kartik Visweswaran -->
<!--suppress JSUnresolvedLibraryURL -->
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Krajee JQuery Plugins - &copy; Kartik</title>

    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css" crossorigin="anonymous">
    <link href="../themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="../jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<!--    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>-->
    <script src="../bootstrap-3.3.7/js/bootstrap.js" crossorigin="anonymous"></script>
<!--    <script src="../themes/fas/theme.js" type="text/javascript"></script>-->
<!--    <script src="../themes/explorer-fas/theme.js" type="text/javascript"></script>-->
    <script src="../sks/js/sks-ui.js" type="text/javascript"></script>
    <script src="../js/aliyun/aliyun-oss-sdk.js" crossorigin="anonymous"></script>
</head>
<body>
<!--<div class="container my-4">-->
<!--</div>-->
<!--<div class="col-xs-5 row">-->
<!--</div>-->
<!--<div class="col-xs-2 row">-->
<!--</div>-->

<div class="container">
        <div class="row">
            <div class="col-xs-4 ">
            </div>
            <div class="col-xs-4 ">
                    <form id="registerForm" autocomplete="off" novalidate="novalidate">
<!--                        <h4 class="no-margins">选择文件:</h4>-->
                        <input id="fileInput" name="file" type="file"  >
                        <div class="input-group col-xs-12">
                            <button id="sendSns" type="button" class="btn btn-info" width="85%"  multiple>获取StsInfo</button>-
                            <button type="button" class="btn btn-success btn-block" width="85%" id="fileListBut" >文件列表</button>
                        </div>


                        <!--                    onsubmit="return resetPassword();"-->
                        <button class="btn btn-success btn-block" id="but1" onclick="return validate();" data-loading="正在，请稍后...">上传OSS</button>

                    </form>
            </div>
            <div class="col-xs-4">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4">
                <div class="span4">
                    <h4 class="no-margins">上传进度信息：</h4>
                    <div class="input-group col-xs-12">
                        <textarea rows="8" id="uploadText" class="form-control" placeholder="" readonly></textarea>
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="span4">
                    <h4 class="no-margins">返回消息：</h4>
                    <div class="input-group col-xs-12">
                        <textarea rows="8" id="msg" class="form-control" placeholder="" readonly></textarea>
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="span4">
                    <h4 class="no-margins">文件列表：</h4>
                    <div class="input-group col-xs-12">
                        <textarea rows="8" id="fileList" class="form-control" placeholder="" readonly></textarea>
                    </div>
                </div>
            </div>
        </div>
    <div class="row">
        <div class="col-xs-4">
            选择文件之后-获取 stsInfo - 文件列表 -  上传OSS  -文件列表
            文件列表只是 演示后台存储方式和前端最后上传OSS完成后的通信
        </div>
        <div class="col-xs-4">
            <div class="span4">
                <h4 class="no-margins">图片：</h4>
                <div class="input-group col-xs-12">
                    <img  id="image" class="" src="" height="400" width="400"/>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
        </div>
    </div>
</div>
</div>


</body>
<script>

    var stsInfo=undefined;
    $(function (){


        $("#sendSns").click(function () {
            file=$("#fileInput")[0].files
            if(file&&file[0]){
                console.log("file=",file[0])
                file=file[0]
                filename= file.name
                url="/stsInfo"
                $.ajaxEasy({
                    url: url,
                    async: true,
                    data:{
                        filename: filename
                    },
                    successCallBack: function (result) {
                        console.log("aa")
                        stsInfo=result.data
                        result=JSON.stringify(result)
                        $("#msg").val(result)
                    }

                })
            }
        })

        $("#fileListBut").click(function () {
            url="/fileList"
            $.ajaxEasy({
                url: url,
                async: true,
                data:{
                },
                successCallBack: function (result) {
                    var fileList=result.data
                    fileList=JSON.stringify(fileList)
                    $("#fileList").val(fileList)
                }

            })
        })
    });

    function validate(){

        url="/validate"
        file=$("#fileInput")[0].files[0]
        console.log("file=",file)

        var ossClient = new OSS({
            // withCredentials:true,
            accessKeyId: stsInfo.accessKeyId,
            accessKeySecret: stsInfo.accessKeySecret,
            stsToken: stsInfo.stsToken,
            // endpoint: 'oss-cn-hangzhou.aliyuncs.com',
            endpoint: stsInfo.endpoint,
            bucket: stsInfo.bucket,
            // region: "oss-cn-hangzhou",
        });

        var storeAs = stsInfo.ossName||stsInfo.fileName
        //sts密钥限制了oss的存储路径,不能随便更改
        // storeAs="asdsd.jpg"
        ossClient.multipartUpload(storeAs, file, {
            // parallel: 100,
            // partSize: 1024 * 1024,

            //cpt:checkpoint
            //res initResult.res
            progress: function (p, cpt, res) {
                console.log("进度")
                console.log("aliyun.progress.p", p);
                console.log("aliyun.progress.cpt", cpt);
                console.log("aliyun.progress.res", res);
                var progressText=p*100+"%"
                uploadTextAppend(progressText)
            }
        }).then(function (result) {


            url="/changeFileStatus"
            $.ajaxEasy({
                url: url,
                async: true,
                data:{
                    fileId: stsInfo.docmentId
                },
                successCallBack: function (result) {
                }

            })

            console.log("aliyun.uploadToOss", result)
            uploadTextAppend("上传完成")
            console.log("aliyun.uploadToOss", result.res.requestUrls)
            var resultUrl=result.res.requestUrls[0]
            uploadTextAppend("url="+resultUrl)
            $("#image").attr("src",resultUrl)




        }).catch(function (err) {
            console.log(err);
            uploadTextAppend("上传错误:"+err)
        });
    // $.ajaxEasy({
    //     url: url,
    //     async: true,
    //     data:{
    //         phonenum: phonenum,
    //         validateCode: validateCode
    //     },
    //     successCallBack: function (result) {
    //         console.log("aa")
    //         result=JSON.stringify(result)
    //         $("#msg").val(result)
    //     }
    //
    // })
    return false
    }

    function uploadTextAppend(str){
        let s=$("#uploadText").val()+"\n"+str
        $("#uploadText").val(s)
    }
</script>
</html>